<template>
  <Table border :columns="columns" :data="data">
    <template #action="{ row, index }">
      <Button v-auth:func:btn:update type="primary" icon="ios-create-outline" size="small" @click="editBtn(row)" style="margin-right:5px">
        修改
      </Button>
      <Button v-auth:func:btn:delete type="error" icon="ios-close-circle-outline" @click="removeBtn(row, index)" size="small"
              style="margin-right:5px">移除
      </Button>
    </template>

    <template #state="{ row, index }">
      <DotTag type="primary" v-if="row.state">正常</DotTag>
      <DotTag type="error" v-else>失效</DotTag>
    </template>
  </Table>

  <BtnForm ref="btnForm" :func="func" :btn="btnRow" v-model="btnWin" v-if="btnWin" @close-win="loadBtnList"/>
</template>

<script>

import DotTag from '../DotTag.vue'
import BtnForm from "./BtnForm.vue";

export default {
  props: {
    func: {type: Object, required: true}
  },
  inject: { // 接收 父组件暴漏的数据
    refresh: {
      from: Symbol.for("funcView")
    }
  },
  data() {
    return {
      btnRow: {id: null, btnName: "", remark: "", state: false},
      btnWin: false,
      columns: [
        {
          type: 'index',
          width: 80
        },
        {
          title: '按钮名',
          key: 'btnName'
        },
        {
          title: '权限标识',
          key: 'remark'
        },
        {
          title: '状态',
          slot: 'state',
          width: 100
        },
        {
          title: '操作',
          slot: 'action',
          width: 200,
          align: 'center'
        }
      ],
      data: [],
    }
  },
  created() {
    this.loadBtnList();
  },
  watch: {
    "refresh": {
      handler: function (newVal) {
        if (newVal["state-" + this.func.id]) {
          this.loadBtnList() ;
        }
      },
      deep: true
    }
  },
  methods: {
    loadBtnList() { // 查询该功能 func.id 对应的所有按钮
      this.$api.queryBtnsByFuncId(this.func.id).then(ret => {
        if (ret.data.status) {
          this.data = ret.data.list;
        }
      })
    },
    editBtn(row) {
      this.btnWin = true;
      this.btnRow = {...row};
      this.$refs.btnForm.resetValidForm();
    },
    removeBtn(row, index) {
      this.$tips.confirm("您确定要删除该按钮吗？").then(() => {
        this.$api.delBtn(row.id).then(ret => {
          if (ret.data.status) {
            this.$tips.success("删除成功");
            this.data.splice(index, 1);
          } else {
            this.$tips.error("删除失败");
          }
        })
      })
    }
  },
  components: {
    BtnForm,
    DotTag,
  }
}
</script>

<style scoped>

</style>